<script setup lang="ts">
import { PageIn } from '$/client'
import ComCtl from '@/components/ComCtl.vue'
import NPagination from '@/components/packaging/NPagination.vue'
import { Logs } from '@/scripts/client-admin'
import { ArrowsRotate as IArrowsRotate } from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import { Button } from 'vexip-ui'
import { ref, watch } from 'vue'

const pagination = ref(PageIn.inst({ size: 500 }))

const {
  loading: refreshing,
  data: logs,
  send: refresh
} = useRequest(() => Logs.list(pagination.value), {
  initialData: []
})

watch(pagination, refresh)
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4" :loading="refreshing" scroll>
    <div class="flex gap-2 overflow-auto">
      <Button @click="refresh" :icon="IArrowsRotate">刷新</Button>
      <NPagination v-model="pagination" :total="logs.total" />
    </div>
    <div>
      <div class="text-[12px]" v-for="(item, index) of logs.content" :key="index">
        {{ item }}
      </div>
    </div>
  </ComCtl>
</template>
